<!DOCTYPE html><!--注册页面-->
<html lang="en" xmlns:th="http://www.thymeleaf.org" class="x-admin-sm">
<head th:replace="common/amazingHeader2::amazing_header('注册')">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form" id="form">
            <div class="layui-form-item">
                <label for="username" class="layui-form-label">
                    <span class="x-red">*</span>用户名
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="username" name="username" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red" id="nameMsg"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="sex"><span class="x-red">*</span>性别</label>
                <div class="layui-input-inline" style="width: 14%">
                    <select id="sex" class="layui-form-select" name="sex">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="phone" class="layui-form-label">
                    <span class="x-red">*</span>手机
                </label>
                <div class="layui-input-inline">
                    <input type="tel" id="phone" name="phone" required="" lay-verify="phone"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red" id="phoneMsg"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="email" class="layui-form-label">
                    <span class="x-red">*</span>邮箱
                </label>
                <div class="layui-input-inline">
                    <input type="email" id="email" name="email" required="" lay-verify="email"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red" id="emailMsg"></span>
                </div>
                <button type="button" class="layui-btn" id="code">获取验证码</button>
            </div>
            <div class="layui-form-item">
                <label for="verCode" class="layui-form-label">
                    <span class="x-red">*</span>验证码
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="verCode" name="verCode" required=""
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red" id="verCodeMsg"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="question"><span class="x-red">*</span>密保问题</label>
                <div class="layui-input-inline" style="width: 14%">
                    <select id="question" class="layui-form-select" name="question">
                        <option value="你的家乡在哪?">你的家乡在哪?</option>
                        <option value="你的小学叫什么?">你的小学叫什么?</option>
                        <option value="你的小名叫什么?">你的小名叫什么?</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">找回您账户的唯一方式</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="answer" class="layui-form-label">
                    <span class="x-red">*</span>答案
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="answer" name="answer" required=""
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red" id="answerMsg">请牢记您的答案</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="password" class="layui-form-label">
                    <span class="x-red">*</span>密码
                </label>
                <div class="layui-input-inline">
                    <input type="password" id="password" name="password" required="" lay-verify="pass"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red" id="passwordMsg">6到16个字符</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="rePass" class="layui-form-label">
                    <span class="x-red">*</span>确认密码
                </label>
                <div class="layui-input-inline">
                    <input type="password" id="rePass" name="rePass" required="" lay-verify="repass"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red" id="rePassMsg"></span>
                </div>
            </div>
            <div>
                <input type="hidden" name="role" id="role" value="0">
            </div>
            <div class="layui-form-item">
                <label for="rePass" class="layui-form-label">
                </label>
                <button class="layui-btn" type="button" lay-submit="" onclick="addUser()">
                    增加
                </button>
                <!--                <button class="layui-btn" lay-filter="add" type="button" onclick="testRePass()">-->
                <!--                    测试-->
                <!--                </button>-->
            </div>
        </form>
    </div>
</div>
<script>
    layui.use(['form', 'layer'],
        function () {
            let form = layui.form,
                layer = layui.layer;

        });
    //获取验证码
    $('#code').click(function () {
        const email = $('#email').val();
        const myReg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;
        if (email === null || email.length === 0) {
            layer.msg('邮箱不能为空！', {time: 1500, icon: 5, shift: 6});
            return false;
        }
        if (!myReg.test(email)) {
            layer.msg('邮箱格式不正确！', {time: 1500, icon: 5, shift: 6});
            return false;
        }
        $.ajax({
            type: 'GET',
            url: 'user/verCode',
            data: {
                'receiver': email
            },
            beforeSend: function () {
                loading = layer.msg('处理中', {icon: 16})
            },
            success: function () {
                layer.close(loading);
            }
        })
    });

    function addUser() {
        const formData = new FormData($("#form")[0]);
        const username = $('#username').val();
        let msg1 = $('#nameMsg');
        msg1.text('');
        if (username.length < 2 || username.length >= 10) {
            msg1.text('长度在2到10之间');
            return false;
        }
        if (username.toString().includes(' ')) {
            msg1.text('不能包含空格');
            return false;
        }
        $.ajax({
            type: 'GET',
            url: 'user/isNameExist',
            async: false,
            data: {
                'name': username
            },
            success: function (result) {
                if (result.data) {
                    msg1.text('用户名已存在');
                    return false;
                }
            }
        });
        let msg = $('#verCodeMsg');
        const code = $('#verCode').val();
        msg.text('');
        if (code === null || code.length === 0) {
            msg.text('请输入验证码');
            return false;
        }
        const answer = $('#answer').val();
        const msg2 = $('#answerMsg');
        msg2.text('请牢记您的答案');
        if (answer.length === 0) {
            msg2.text('不能为空');
            return false;
        }
        const psw = $('#password').val();
        const msg3 = $('#passwordMsg');
        msg3.text('6到16个字符');
        if (psw.length < 6 || psw.length > 16) {
            msg3.text('检查您输入的长度 6~16之间');
            return false;
        }
        const rePass = $('#rePass').val();
        const msg4 = $('#rePassMsg');
        msg4.text('');
        if (psw !== rePass) {
            msg4.text('两次输入不一样！！！');
            return false;
        }
        //得到用户角色
        const href = window.location.href;
        if (href.indexOf('?') !== -1) {
            const theRole = href.split('?')[1].split('=')[1];
            $('#role').val(theRole);
        }
        $.ajax({
            type: 'POST',
            url: 'user/addUser',
            data: formData,
            cache: false,           // 不缓存
            processData: false,     // jQuery不要去处理发送的数据
            contentType: false,     // jQuery不要去设置Content-Type请求头
            beforeSend: function () {
                loading = layer.msg('处理中', {icon: 16})
            },
            success: function (result) {
                if (result.status === 0) {
                    layer.msg(result.msg, {time: 1500, icon: 5, shift: 6});
                } else {
                    layer.close(loading);
                    xadmin.close();
                }
            }
        })
    }


</script>
<script>
    function testUsername() {
        const username = $('#username').val();
        let msg = $('#nameMsg');
        if (username.length < 2 || username.length >= 10) {
            msg.text('长度在2到10之间');
            return false;
        }
        if (username.toString().includes(' ')) {
            msg.text('不能包含空格');
            return false;
        }
    }

    function testAnswer() {
        const answer = $('#answer').val();
        const msg = $('#answerMsg');
        msg.text('请牢记您的答案');
        if (answer.length === 0) {
            msg.text('不能为空');
            return false;
        }
    }

    function testPsw() {
        const psw = $('#password').val();
        const msg = $('#passwordMsg');
        msg.text('6到16个字符');
        if (psw.length < 6 || psw.length > 16) {
            msg.text('检查您输入的长度 6~16之间');
            return false;
        }
    }

    function testRePass() {
        const psw = $('#password').val();
        const rePass = $('#rePass').val();
        const msg = $('#rePassMsg');
        msg.text('');
        if (psw !== rePass) {
            msg.text('两次输入不一样！！！');
            return false;
        }
    }

</script>
</body>
</html>